<html>
  <head>
    <title>Searching for subjectivity images by tag</title>
    <style>
body { margin: 0; padding: 0; }
#page { width: 100%; height: 100%; }
#header { width: 100%; height: 100px; border-top: 1px solid grey; background: #ccc; padding: 20px; }
#search { width: 100%; background: #808080; padding: 20px; }
.thumb { float: left; margin: 5px; width: 155px; height: 155px; }
.air { background: #cfc; }
.water { background: #fcc; }
    </style>
    <script>

    </script>
  </head>
  <body>
    <table cellspacing='0' id='page'>
      <tr>
        <td id='header' colspan='1' align='center'><h1>Search for tag #<%=h @tag.id %>: "<%=h @tag.tagname%>"</h1></td>
      </tr>
      <tr>
        <td id='search' valign='middle' align='center'>
          <%


ballast = false

@votes.each do |v|
  i = v.image_fact

  # Have we hit the plimsoll?
  # mark all the rest as ballast and skip this image, as we don't display the plimsoll.
  if(i.plimsoll?)
    ballast = true
    next
  end
  
  scale = 150.0 / [i.width, i.height].max
  w = (i.width*scale).round
  h = (i.height*scale).round
  %><div class='thumb <%=ballast ? 'water' : 'air'%>'><a href='/image_facts/show_raw/<%=v.image_fact_id%>' title='<%="%.4f"%(v.perc/1e4)%>%'><img src='/image_facts/show_raw/<%=v.image_fact_id%>' <%
      %>style='width: <%=w%>px; height: <%=h%>px; border: 0; ' /></a></div>
      <%

end

          %>
        </td>
      </tr>
    </table>
    <script> init(); </script>
  </body>
</html>